<template lang="pug">
.view.cp-train-report.fix-flex-pos
  //- 查询
  el-form.trarep-search(:inline="true")
    el-form-item
      el-radio-group(v-model="tableType", @change="changeTable")
        el-radio-button(label="plan") 课程组合
        el-radio-button(label="course") 培训课程
        el-radio-button(label="trainer") 培训人员
    el-form-item
      el-input(
        v-model="name",
        placeholder="编码/名称",
        style="width: 200px")
    el-form-item
      el-select.select-width(v-model="timeType", placeholder="请选择")
        el-option(key="0", label="指派时间", :value="0")
        el-option(key="1", label="截止时间", :value="1")
        el-option(key="2", label="完成时间", :value="2")
    el-form-item
      el-date-picker.date-width(
        v-model="dateRange",
        type="daterange",
        unlink-panels,
        start-placeholder="开始日期",
        end-placeholder="结束日期",
        value-format="timestamp",
        :default-time="['00:00:00', '23:59:59']")
    el-form-item(label="指派人 :")
      el-select.select-width(v-model="assignor", placeholder="请选择")
        el-option(label="全部", :value="null")
        el-option(
          v-for="(item, index) in assignorSelect",
          :key="index",
          :label="item.name",
          :value="item.value")
    el-form-item
      el-button(type="primary", @click="search") 搜索
  //- 表格
  .trarep-table
    el-table(
      v-show="tableType === 'plan'",
      :data="dataList",
      highlight-current-row,
      v-loading="loadingData",
      size="mini",
      height="100%")
      el-table-column(show-overflow-tooltip, type="index", label="序号")
      el-table-column(show-overflow-tooltip, prop="planCode", label="组合编号")
      el-table-column(show-overflow-tooltip, prop="planName", label="组合名称")
      el-table-column(show-overflow-tooltip, label="指派人")
        template(slot-scope="scope")
          span {{ scope.row.assignor | compare-list(assignorSelect) }}
      el-table-column(show-overflow-tooltip, label="指派时间", min-width="90px")
        template(slot-scope="scope")
          span {{ scope.row.assignorTime | date-format }}
      el-table-column(show-overflow-tooltip, label="到期时间", min-width="90px")
        template(slot-scope="scope")
          span {{ scope.row.expireTime | date-format }}
      el-table-column(show-overflow-tooltip, label="完成时间", min-width="90px")
        template(slot-scope="scope")
          span {{ scope.row.completeTime | date-format }}
      el-table-column(show-overflow-tooltip, prop="planNumber", label="计划人数")
      el-table-column(show-overflow-tooltip, prop="learnNumber", label="待学人数")
      el-table-column(show-overflow-tooltip, prop="studiedNumber", label="已学人数")
    el-table(
      v-show="tableType === 'course'",
      :data="dataList",
      highlight-current-row,
      v-loading="loadingData",
      size="mini",
      height="100%")
      el-table-column(show-overflow-tooltip, type="index", label="序号")
      el-table-column(show-overflow-tooltip, prop="planCode", label="组合编号")
      el-table-column(show-overflow-tooltip, prop="planName", label="组合名称")
      el-table-column(show-overflow-tooltip, prop="courseCode", label="课程编码")
      el-table-column(show-overflow-tooltip, prop="courseName", label="课程名称")
      el-table-column(show-overflow-tooltip, label="指派人")
        template(slot-scope="scope")
          span {{ scope.row.assignor | compare-list(assignorSelect) }}
      el-table-column(show-overflow-tooltip, label="指派时间", min-width="90px")
        template(slot-scope="scope")
          span {{ scope.row.assignorTime | date-format }}
      el-table-column(show-overflow-tooltip, label="到期时间", min-width="90px")
        template(slot-scope="scope")
          span {{ scope.row.expireTime | date-format }}
      el-table-column(show-overflow-tooltip, label="完成时间", min-width="90px")
        template(slot-scope="scope")
          span {{ scope.row.completeTime | date-format }}
      el-table-column(show-overflow-tooltip, prop="planNumber", label="计划人数")
      el-table-column(show-overflow-tooltip, prop="learnNumber", label="待学人数")
      el-table-column(show-overflow-tooltip, prop="studiedNumber", label="已学人数")
    el-table(
      v-show="tableType === 'trainer'",
      :data="dataList",
      highlight-current-row,
      v-loading="loadingData",
      size="mini",
      height="100%")
      el-table-column(show-overflow-tooltip, type="index", label="序号")
      el-table-column(show-overflow-tooltip, prop="employeeId", label="员工号")
      el-table-column(show-overflow-tooltip, prop="name", label="姓名")
      el-table-column(show-overflow-tooltip, prop="planCode", label="组合编号")
      el-table-column(show-overflow-tooltip, prop="planName", label="组合名称")
      el-table-column(show-overflow-tooltip, prop="courseCode", label="课程编号")
      el-table-column(show-overflow-tooltip, prop="courseName", label="课程名称")
      el-table-column(show-overflow-tooltip, label="指派人")
        template(slot-scope="scope")
          span {{ scope.row.assignor | compare-list(assignorSelect) }}
      el-table-column(show-overflow-tooltip, label="指派时间", min-width="90px")
        template(slot-scope="scope")
          span {{ scope.row.assignorTime | date-format }}
      el-table-column(show-overflow-tooltip, label="到期时间", min-width="90px")
        template(slot-scope="scope")
          span {{ scope.row.expireTime | date-format }}
      el-table-column(show-overflow-tooltip, label="完成时间", min-width="90px")
        template(slot-scope="scope")
          span {{ scope.row.completeTime | date-format }}
      el-table-column(show-overflow-tooltip, label="完成状态")
        template(slot-scope="scope")
          span {{ scope.row.status | compare-list(statusSelect) }}
      el-table-column(show-overflow-tooltip, prop="score", label="测试得分")
  //- 分页
  el-pagination.trarep-pagination(
    background,
    layout="total, prev, pager, next, jumper",
    prev-text="上一页",
    next-text="下一页",
    @current-change="handleCurrentChange",
    :current-page="pageNum",
    :page-size="pageSize",
    :total="totalNum")
</template>

<script>
import { mapGetters } from 'vuex';
import TrainData from '@/data/train';

export default {
  name: 'trareport',
  data() {
    return {
      loadingData: true,
      dataList: [],
      pageNum: 1,
      pageSize: 16,
      totalNum: 0,
      // 搜索条件
      tableType: 'plan',
      timeType: 0,
      dateRange: [],
      name: null,
      assignor: null,
      // 搜索下拉框
      statusSelect: [
        { name: '已学', value: 0 },
        { name: '待学', value: 1 }
      ],
      assignorSelect: [
        { name: '严峻熙', value: 0 },
        { name: '韦伟诚', value: 1 },
        { name: '杜子轩', value: 2 }
      ]
    };
  },
  computed: {
    ...mapGetters({
      creator: 'employeeId'
    })
  },
  created() {
  },
  mounted() {
    this.loadDataList();
  },
  methods: {
    filterParams() {
      const params = {
        dataType: this.tableType,
        name: this.name,
        assignor: this.assignor,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      if (this.timeType === 0 && this.dateRange && this.dateRange[0]) {
        params.startCreationTime = this.dateRange[0];
        params.endCreationTime = this.dateRange[1];
      }
      if (this.timeType === 1 && this.dateRange && this.dateRange[0]) {
        params.startUpdateTime = this.dateRange[0];
        params.endUpdateTime = this.dateRange[1];
      }
      if (this.timeType === 2 && this.dateRange && this.dateRange[0]) {
        params.startInboundTime = this.dateRange[0];
        params.endInboundTime = this.dateRange[1];
      }
      for (const key in params) {
        if (params[key] === null || params[key] === '') {
          delete params[key];
        }
      }
      return params;
    },
    // 取得表格数据
    loadDataList() {
      this.loadingData = true;
      // const params = this.filterParams();
      setTimeout(() => {
        this.dataList = TrainData.reportList;
        if (this.tableType === 'plan') {
          this.totalNum = 64;
        } else if (this.tableType === 'course') {
          this.totalNum = 52;
        } else if (this.tableType === 'trainer') {
          this.totalNum = 80;
        }
        this.loadingData = false;
      }, 1000);
    },
    // 搜索
    search() {
      if (this.pageNum !== 1) {
        this.pageNum = 1;
      }
      this.loadDataList();
    },
    // 页码改变
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadDataList();
    },
    // 改变表格类型
    changeTable(value) {
      console.log(value);
      this.loadDataList();
    }
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$SEARCHHEIGHT: 56px
$PAGEHEIGHT: 56px
$SELECTWIDTH: 100px
.cp-train-report
  .trarep-search
    height: $SEARCHHEIGHT
    padding: 12px 0 12px 16px
    overflow-x: auto
    overflow-y: hidden
    .select-width
      width: $SELECTWIDTH
    .date-width
      width: 260px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      margin-left: 6px
      padding-right: 6px
    .el-date-editor .el-range__close-icon
      width: 20px
    .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label
      height: 32px
  .trarep-table
    position: absolute
    top: $SEARCHHEIGHT
    bottom: $PAGEHEIGHT
    left: 16px
    right: 16px
    overflow-x: hidden
    overflow-y: auto
    &::before
      display: none
    .icon-act
      font-size: 16px
      font-weight: 500
      cursor: pointer
      margin-left: 3px
      margin-right: 3px
      &:hover
        color: #5D9BFB
  .el-table
    th, td
      text-align: center
  .trarep-pagination
    position: absolute
    bottom: 12px
    left: 0
    right: 0
    text-align: center
</style>
